<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>mathoid test-page</title>
    <script src="info.js" lang="javascript"></script>
    <link rel="stylesheet" href="info.css">
</head>
<body>
<h2>mathoid test-page</h2>
<p>This page provides a simple test interface to mathoid.
    <a href="https://github.com/wikimedia/mathoid">Find the source on GitHub.</a>
</p>
<h3>Request</h3>
<div class="container">
    <form id="requestForm">
        <div class="row">
            <div class="col25">
                <label for="type">type (input format)</label>
            </div>
            <div class="col75">
                <select id="type">
                    <option value="TeX" selected>TeX</option>
                    <option value="chem">chem</option>
                    <option value="inline-TeX">inline-TeX</option>
                    <option value="MathML">MathML</option>
                    <option value="AsciiMath">AsciiMath</option>
                </select>
            </div>
        </div>
        <div class="row">
            <div class="col25">
                <label for="q">q (content of the math tag)</label>
            </div>
            <div class="col75">
                <textarea id="q" style="height:50px">{\displaystyle e^{i\pi} + \frac12 = -\frac12   }</textarea>
            </div>
        </div>
        <div class="row">
            <div class="col25">
                <label for="nospeech">nospeech</label>
            </div>
            <div class="col75">
                <input type="checkbox" id="nospeech" value="true">
            </div>
        </div>
        <div class="row">
            <input type="submit" value="Submit">
        </div>
    </form>
</div>
<h3>Request</h3>
<div class="container">
    <div class="row">
        <div class="col25">
            <label for="mmlRes">MathML</label>
        </div>
        <div class="col37" id="mmlRes"></div>
        <div class="col37" id="mmlResC"></div>
    </div>
    <div class="row">
        <div class="col25">
            <label for="svgRes">SVG</label>
        </div>
        <div class="col37" id="svgRes"></div>
        <div class="col37" id="svgResC"></div>
    </div>
    <div class="row">
        <div class="col25">
            <label for="styleRes">style</label>
        </div>
        <div class="col37">
            <pre id="styleRes"></pre>
        </div>
        <div class="col37">
            <pre id="styleResC"></pre>
        </div>
    </div>
    <div class="row">
        <div class="col25">
            <label for="checkedRes">checked</label>
        </div>
        <div class="col75">
            <pre id="checkedRes"></pre>
        </div>
    </div>
</div>
<br/>
</body>
</html>